<script setup>
import {request} from "@/util/request.js";
import {ref} from "vue";
import {useUserStore} from "@/store/user.js";
import {ElMessage} from "element-plus";

const userStore = useUserStore();
const menus = ref([])
const menu = ref({
    menuName: '',
    parentId: 0,
    icon: '',
    url: '',
    status: '',
    sort: '',
    hasChildren: false
})

const editMenu = ref({})

// 发送请求获取所有Menu
request.get('/menu/list?parentId=0', {
    headers: {
        'Authorization': userStore.token
    }
}).then(res => {
    res.data.forEach(item => {
        item.hasChildren = !item.hasChildren
    })
    menus.value = res.data
})

function handleDelete(index, row) {
    console.log(row.menuId)
    request.get('/menu/delete/' + row.menuId, {
        headers: {
            'Authorization': userStore.token
        }
    }).then(res => {
        if (res.code === 1) {
            ElMessage.success("删除成功")
        } else {
            ElMessage.error(res.msg)
        }
    })
}


const dialogVisible = ref(false)

function handleEdit(row) {
    dialogVisible.value = true
    editMenu.value = row
}

function handleClose() {
    ElMessage.info("取消修改")
    dialogVisible.value = false
}

/**
 * 修改菜单
 */
function submitEdit() {
    request.post('/menu/edit', JSON.stringify(editMenu.value), {
        headers: {
            'Authorization': userStore.token,
            'Content-type': 'application/json;charset=UTF-8'
        }
    }).then(res => {
        dialogVisible.value = false
        if (res.code === 1) {
            ElMessage.success("修改成功！")
        } else {
            ElMessage.error("修改失败")
        }
    })
}

function formatterTime(row, column, cellValue, index) {
    return new Date(cellValue).toLocaleString()
}

const options = [
    {
        value: '1',
        label: '启用',

    },
    {
        value: '0',
        label: '禁用'
    }
]

function handleSearch() {
    request.get("/menu/list?menuName=" + menu.value.menuName + "&status=" + menu.value.status + "&parentId=" + menu.value.parentId, {
        headers: {
            'Authorization': userStore.token
        }
    }).then(res => {
        res.data.forEach(item => {
            item.hasChildren = !item.hasChildren
        })
        menus.value = res.data
    })
}

function handleReset() {
    menu.value.menuName = ''
    menu.value.status = ''
    menu.value.parentId = 0
    handleSearch()
}
</script>

<template>

    <el-row>
        <el-col>
            <el-form label-width="80px" size="large" :model="menu">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="菜单名称">
                            <el-input v-model="menu.menuName" placeholder="请输入菜单名称"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="状态">
                            <el-select v-model="menu.status" class="m-2" placeholder="菜单状态" size="large">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="6" :offset="2">
                        <el-button type="primary" size="default" @click="handleSearch">搜索</el-button>
                        <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                :data="menus"
                style="width: 100%; margin-bottom: 20px"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                row-key="menuId">
                <el-table-column label="菜单名称" prop="menuName" width="160"/>
                <el-table-column label="图标" prop="icon">
                    <template #default="scope">
                        <Icon :icon="scope.row.icon" class="myIcon"/>
                    </template>
                </el-table-column>
                <el-table-column label="排序" prop="displayOrder" sortable/>
                <el-table-column label="路径" width="120" prop="menuUrl"/>
                <el-table-column label="权限标识" prop="permissionIdentifier"/>
                <el-table-column label="类型" prop="menuType">
                    <template #default="scope">
                        <el-tag :type="scope.row.menuType == '1' ? 'success' : 'danger'" size="default">
                            {{scope.row.menuType == '1'? '子菜单' : (scope.row.menuType == '0'? '主菜单' : '按钮')}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="menuStatus">
                    <template #default="scope">
                        <el-tag :type="scope.row.menuStatus == '1'?'success' : 'danger'" size="small">
                            {{scope.row.menuStatus == '1' ? '启用' : '禁用'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180" prop="createdAt" sortable :formatter="formatterTime"/>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <!--修改信息-->
    <el-dialog
        v-model="dialogVisible"
        title="修改菜单信息"
        width="50%"
        :before-close="handleClose">
        <el-form label-width="80px" size="large">
            <el-row>
                <el-col :span="12">
                    <!--<el-form-item label="上级菜单">-->
                    <!--    &lt;!&ndash;<el-input v-model="editMenu.menuName"></el-input>&ndash;&gt;-->
                    <!--</el-form-item>-->
                    <el-form-item label="菜单类型">
                        <el-radio-group v-model="editMenu.menuType" class="ml-4">
                            <el-radio :label="0" size="large">目录</el-radio>
                            <el-radio :label="1" size="large">菜单</el-radio>
                            <el-radio :label="2" size="large">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="菜单图标" v-if="editMenu.menuType != '2'" readonly>
                        <el-input v-model="editMenu.icon">
                            <template #prepend>
                                <Icon :icon="editMenu.icon" class="myIcon"/>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="菜单名称">
                        <el-input v-model="editMenu.menuName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="路由地址">
                        <el-input v-model="editMenu.menuUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="editMenu.menuStatus" class="ml-4">
                            <el-radio :label="0" size="large">停用</el-radio>
                            <el-radio :label="1" size="large">正常</el-radio>
                        </el-radio-group>
                        <!--<el-option></el-option>-->
                    </el-form-item>
                    <el-form-item label="显示排序">
                        <el-input-number v-model="editMenu.displayOrder" :min="1" :max="10" />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>
</template>

<style>
.myIcon {
    width: 20px;
    height: 20px;
}
</style>